<template>
  <view class="tmp-box">
    <view class="filterBox">
      <view class="filter-input">
        <u-icon name="search" color="#999999" size="22"></u-icon>
        <input
          class="search-text"
          type="text"
          v-model="inputVal"
          confirm-type="搜索"
          @confirm="handleFllter"
          placeholder="搜索"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
    }
  },
  methods: {
    handleFllter(e) {
      this.$emit('confirm', e.detail.value)
    },
    clears() {
      this.inputVal = ''
    },
  },
}
</script>

<style lang="scss" scoped>
.filterBox {
  padding: 15rpx 32rpx;
  background-color: #fff;
  .filter-input {
    height: 78rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    display: flex;
    align-items: center;

    padding-left: 40rpx;
    .filterImg {
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
      margin-bottom: 5rpx;
    }
    .filterImgs {
      width: 32rpx;
      height: 32rpx;
    }
    .search-text {
      width: 84%;
      font-size: 26rpx;
      color: #999999;
    }
  }
}
</style>
